<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../Ajs/vue.js"></script>
</head>
<body>
<div id="box">
    <div>{{msg}}</div>
    <input type="button" value="更新" @click="update">
    <input type="button" value="销毁" @click="destroy">
</div>
<script>
    var VM= new Vue({
        el:"#box",
        data:{
            msg:"生命周期",
        },
        methods:{
            update:function(){
                this.msg = "更新"
            },
            destroy:function(){
                this.$destroy();  //销毁当前vue实例
            }
        },
        beforeCreate:function(){
            console.log("beforeCreate");
        },
        created:function(){
            console.log("created");
        },
        beforeMount:function(){
            console.log("beforeMount");
        },
        mounted:function(){   // 主要：vue实例加载完成。（页面加载完成） 这时我们就可以根据接口获取数据，在渲染到页面上
            console.log("mounted");
        },
        beforeUpdate:function(){
            console.log("beforeUpdate");
        },
        updated:function(){
            console.log("updated");
        },
        beforeDestroy:function(){
            console.log("beforeDestroy");
        },
        destroyed:function(){
            console.log("destroyed");
        }

    })

    //生命周期
    /*
    挂载
        beforeCreate   创建
        created
        beforeMount     成立
        mounted
    * */

    /*
    更新
        beforeUpdate
        update
    **/

    /*
    销毁    //销毁vue 实例
        beforeDestroy
        destroyed
    * */


    /*
    activated
        用到过，如果这个页面已经加载出来了，再跳到这个页面，created 和 mounted 是不会在执行的，数据就不会在加载。
      就会要用到activated，来执行某些代码
    */

</script>
</body>
</html>
